<!DOCTYPE html>
<html>
<head>
    <title>Coaxial Cable Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Define parameters
        const cx = 200;
        const cy = 250;
        const r1 = 40;
        const r2 = 80;
        const r3 = 115;
        const length = 300;

        // Set styles
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';
        
        // Function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // 1. Draw cylinder body
        ctx.beginPath();
        ctx.moveTo(cx, cy - r3);
        ctx.lineTo(cx + length, cy - r3);
        ctx.arc(cx + length, cy, r3, -Math.PI / 2, Math.PI / 2, false);
        ctx.lineTo(cx, cy + r3);
        ctx.stroke();

        // 2. Draw cross-section
        // Outer circle R3
        ctx.beginPath();
        ctx.arc(cx, cy, r3, 0, 2 * Math.PI);
        ctx.stroke();

        // Inner circle R1
        ctx.beginPath();
        ctx.arc(cx, cy, r1, 0, 2 * Math.PI);
        ctx.stroke();

        // Middle circle R2 and the cutaway lines
        // Based on visual analysis, R2 is an arc, not a full circle.
        const startAngleR2 = -25 * Math.PI / 180;
        const endAngleR2 = 225 * Math.PI / 180;
        
        ctx.beginPath();
        ctx.arc(cx, cy, r2, startAngleR2, endAngleR2, false);
        ctx.stroke();

        // The lines that create the "cutout" look
        const p1 = { x: cx + r2 * Math.cos(startAngleR2), y: cy + r2 * Math.sin(startAngleR2) };
        const p2 = { x: cx, y: cy - r1 };
        
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();

        const p3 = { x: cx + r1, y: cy };
        const p4 = { x: cx + r1, y: cy + r2 * Math.sin(endAngleR2) };

        ctx.beginPath();
        ctx.moveTo(p3.x, p3.y);
        ctx.lineTo(p4.x, p4.y);
        ctx.stroke();


        // 3. Draw Radii and Labels
        ctx.lineWidth = 1.5;

        // Radius R1
        const r1_angle = 135 * Math.PI / 180;
        drawArrow(ctx, cx, cy, cx + r1 * Math.cos(r1_angle), cy + r1 * Math.sin(r1_angle));
        ctx.font = "italic 22px Times New Roman";
        ctx.fillText("R", cx - 65, cy - 25);
        ctx.font = "italic 16px Times New Roman";
        ctx.fillText("1", cx - 52, cy - 20);

        // Radius R2
        const r2_angle = 35 * Math.PI / 180;
        drawArrow(ctx, cx, cy, cx + r2 * Math.cos(r2_angle), cy - r2 * Math.sin(r2_angle));
        ctx.font = "italic 22px Times New Roman";
        ctx.fillText("R", cx + 35, cy - 100);
        ctx.font = "italic 16px Times New Roman";
        ctx.fillText("2", cx + 48, cy - 95);

        // Radius R3
        const r3_angle = 90 * Math.PI / 180;
        drawArrow(ctx, cx, cy, cx, cy + r3);
        ctx.font = "italic 22px Times New Roman";
        ctx.fillText("R", cx - 40, cy + 120);
        ctx.font = "italic 16px Times New Roman";
        ctx.fillText("3", cx - 27, cy + 125);
        
        // 4. Draw Text Label
        ctx.font = "24px KaiTi";
        ctx.fillStyle = "black";
        ctx.fillText("题 7 图", cx + 50, cy + r3 + 50);

    </script>
</body>
</html>